<script setup lang="ts">
import {
  NLayout,
  NLayoutContent,
  NSpace,
  NInput,
  NButton,
  NIcon,
  NCard,
  NGrid,
  NGi,
  NBadge,
  NAvatar,
  NText,
  NAlert,
} from "naive-ui";

import { Search12Regular, Add16Regular } from "@vicons/fluent";
</script>

<template>
  <NLayout has-sider class="tw-h-screen">
    <!-- 侧边栏1 -->
    <div class="tw-w-16 tw-bg-first-side">这里是侧边栏</div>
    <!-- 侧边栏2 -->
    <div class="tw-w-72">
      <div class="tw-flex tw-h-full tw-flex-col">
        <!-- 搜索部分 -->
        <NSpace class="tw-h-16" justify="center" align="center">
          <NInput size="tiny" class="tw-bg-gray-200">
            <template #prefix>
              <n-icon :component="Search12Regular" />
            </template>
          </NInput>
          <NButton type="primary" size="tiny">
            <template #icon>
              <n-icon :component="Add16Regular"></n-icon>
            </template>
          </NButton>
        </NSpace>
        <!-- 聊天部分 -->
        <NSpace
          vertical
          class="tw-overflow-y-scroll tw-flex-grow tw-bg-gray-100"
        >
          <!-- 一个卡片 -->
          <NCard
            v-for="i in 10"
            :key="i"
            size="small"
            class="tw-rounded-none tw-bg-gray-100 hover:tw-bg-gray-400"
          >
            <div class="tw-flex tw-w-full">
              <!-- 头像 -->
              <NBadge :value="13" :max="15" class="tw--ml-4 tw-content-center">
                <n-avatar class="tw-ml-4" size="large" />
              </NBadge>
              <!-- 右边 -->
              <NSpace vertical class="tw-flex-grow tw-ml-4">
                <!-- 第一行 -->
                <NSpace justify="space-between">
                  <!-- 名称 -->
                  <NSpace class="tw-flex-grow"> 订阅号 </NSpace>
                  <!-- 时间 -->
                  <NSpace justify="end">
                    <NText class="tw-text-gray-200"> 昨天 </NText>
                  </NSpace>
                </NSpace>
                <!-- 第二行 -->
                <NSpace justify="space-between">
                  <NSpace class="tw-flex-grow"> 订阅号 </NSpace>
                  <!-- 时间 -->
                  <NSpace justify="end">
                    <NText class="tw-text-gray-200"> 昨天 </NText>
                  </NSpace>
                </NSpace>
              </NSpace>
            </div>
          </NCard>
        </NSpace>
      </div>
    </div>

    <NLayoutContent>
      <div class="tw-flex tw-flex-col tw-h-full">
        <!-- 按钮 -->
        <NSpace justify="end" :size="0">
          <NButton>1</NButton>
          <NButton>2</NButton>
          <NButton>3</NButton>
        </NSpace>
        <!-- 聊天窗显示标题 -->
        <NSpace
          justify="space-between"
          :size="0"
          class="tw-border-0 tw-border-b tw-border-solid tw-border-gray-500"
        >
          <NText class="tw-text-2xl">订阅号</NText>
          <NButton>3</NButton>
        </NSpace>
        <!-- 聊天信息 -->
        <NSpace
          class="tw-flex-grow tw-overflow-y-scroll tw-px-5 tw-py-5"
          vertical
        >
          <NSpace v-for="i in 10" :key="i" vertical>
            <NSpace>
              <n-avatar class="tw-ml-4" size="large" />
              <n-alert title="Default 类型" type="default">
                Gee it's good to be back home
              </n-alert>
            </NSpace>
            <NSpace justify="end">
              <n-alert title="Default 类型" type="success">
                Gee it's good to be back home
              </n-alert>
              <n-avatar class="tw-ml-4" size="large" />
            </NSpace>
          </NSpace>
        </NSpace>
        <!-- 输入 -->
        <NSpace class="tw-min-h-44 tw-basis-44"> 这里可以输入 </NSpace>
      </div>
    </NLayoutContent>
  </NLayout>
</template>

<style scoped></style>
